<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<style>
    #selectPODiv .modal-dialog{
        width:1200px !important;
        margin: 80px auto;
        max-width: 1200px !important;
    }
    #selectPODiv .form-group select, #selectPODiv .form-group input {
        width: calc(100vw / 2 - 400px);
    }
    .btn-warning.btn-outline {
        color: #fff;
    }
    .btn-submit{
        background: #2c74fa;
        margin-left: 20px;
        border: none;
        color: #fff;
    }
    #selectPODiv .modal-dialog .modal-content{
        height:700px;
        overflow-y:auto;
    }
    div::-webkit-scrollbar {
        width: 8px;
    }
    div::-webkit-scrollbar-track {
        background-color:#fff;
        border-radius: 0 4px 4px 0;
    }
    div::-webkit-scrollbar-thumb {
        background-color:#fff;
        border-radius: 0 4px 4px 0;
    }
</style>
<div class="modal" id="selectPODiv" tabindex="-1" role="dialog" aria-hidden="true" style="width: auto;">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <h4 class="modal-title">物资信息选择</h4>
            </div>
            <div class="modal-body" style="padding-bottom: 20px; padding-top: 5px;">
                <jsp:include page="materialSearch.jsp"></jsp:include>
                <div class="table-responsive">
                    <div class="col-sm-12 text-right" style="padding-right: 0">
                        <button id="searchButton" class="btn btn-default btn-sm btn-notcontrol" type="button" style="margin-bottom: 5px;"><i class="fa fa-search"></i>&nbsp;&nbsp;展开查询</button>
                    </div>
                    <table class="table table-striped table-hover table-bordered border-top">
                        <thead>
                            <tr>
                                <th width="5%"></th>
                                <th>申请公司</th>
                                <th>申请部门</th>
                                <th>物料编码</th>
                                <th>品牌</th>
                                <th>物资名称</th>
                                <th>物类科目</th>
                                <th>型号</th>
                                <th>数量</th>
                                <th>单位</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach items="${requestScope.list}" var="sub" varStatus="index">
                                <tr id="${"line".concat(index.count)}">
                                    <td><input type="checkbox" class="i-checks" onclick="checkSelected(${index.count})"></td>
                                    <td id="${"subId".concat(index.count)}" style="display: none">${sub.id}</td>
                                    <td id="${"subCompanyName".concat(index.count)}">${sub.companyName}</td>
                                    <td id="${"subDepartmentName".concat(index.count)}">${sub.departmentName}</td>
                                    <td id="${"subModelNumber".concat(index.count)}" style="display: none">${sub.materialId}</td>
                                    <td id="${"subCode".concat(index.count)}">${sub.materialCode}</td>
                                    <td id="${"subBrand".concat(index.count)}">${sub.materialBrand}</td>
                                    <td id="${"subName".concat(index.count)}">${sub.materialName}</td>
                                    <td id="${"subModelNumberText".concat(index.count)}">${sub.materialModel}</td>
                                    <td id="${"subType".concat(index.count)}">${sub.materialCategory}</td>
                                    <td id="${"subNumber".concat(index.count)}">${sub.quantity}</td>
                                    <td id="${"subUnit".concat(index.count)}">${sub.materialUnit}</td>
                                </tr>
                            </c:forEach>
                        </tbody>
                        <tfoot>
                            <jsp:include page="../common/popPages.jsp"></jsp:include>
                        </tfoot>
                    </table>
                </div>
                <div class="col-md-12">
                    <div class="form-group row m-b-none">
                        <div class="col-sm-10 col-sm-offset-2 text-right">
                            <button type="button" class="btn btn-primary" onclick="inLineMerge()">线上合并</button>
                            <button type="button" class="btn btn-primary" onclick="outLineMerge()">线下合并</button>
                            <button type="button" class="btn btn-primary" onclick="inLineAdd()">线上保存</button>
                            <button type="button" class="btn btn-primary" onclick="outLineAdd()">线下保存</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    var selected = [];

    // 添加/移除选中数据
    function checkSelected(id) {
        let index = selected.indexOf(id);
        if (index != -1) {
            selected.splice(index, 1);
        } else {
            selected.push(id);
        }
    }

    // 线上合并
    function inLineMerge() {
        if (selected.length < 2) {
            redragonJS.alert("至少需要选中2条数据!");
            return;
        }
        let ids = $("#subId" + selected[selected.length - 1]).text();
        let num = parseInt($("#subNumber" + selected[selected.length - 1]).text());
        for (let i = 0; i < selected.length - 1; i ++) {
            let subModelNumber = $("#subModelNumber" + selected[i]).text();
            for (let j = i + 1; j < selected.length; j ++) {
                if ($("#subModelNumber" + selected[j]).text() != subModelNumber) {
                    return redragonJS.alert("非相同物资不允许合并!");
                }
            }
            ids += "," + $("#subId" + selected[i]).text();
            num +=  parseInt($("#subNumber" + selected[i]).text());
        }
        for (let i = 0; i < selected.length; i ++) {
            parent.materialIds.push($("#subId" + selected[i]).text());
        }
        let j = ++ parent.materialSise;
        let html =
            '<tr id="materialLine' + j + '">' +
                '<td id="materialNo' + j + '">' + j + '</td>' +
                '<td id="materialDetailId' + j + '" style="display: none">' + ids + '</td>' +
                '<td id="materialId' + j + '" style="display: none">' + $("#subModelNumber" + selected[0]).text() + '</td>' +
                '<td id="lineType' + j + '" style="display: none">1</td>' +
                '<td id="lineTypeText' + j + '">线上采购</td>' +
                '<td id="materialCode' + j + '">' + $("#subCode" + selected[0]).text() + '</td>' +
                '<td id="materialBrand' + j + '">' + $("#subBrand" + selected[0]).text() + '</td>' +
                '<td id="materialName' + j + '">' + $("#subName" + selected[0]).text() + '</td>' +
                '<td id="materialType' + j + '">' + $("#subType" + selected[0]).text() + '</td>' +
                '<td id="materialModelNumberText' + j + '">' + $("#subModelNumberText" + selected[0]).text() + '</td>' +
                '<td id="materialNumber' + j + '">' + num + '</td>' +
                '<td id="materialUnit' + j + '">' + $("#subUnit" + selected[0]).text() + '</td>' +
                '<td id="materialOperation' + j + '" class="attachment">' +
                    '<button id="materialdel' + j + '" type="button" onclick="delMaterial(' + j + ')">删除</button>' +
                '</td>' +
            '</tr>';
        parent.appendHtml("materialBody", "materialNothing", html);
        $('#selectPODiv').modal('hide');
    }

    // 线下合并
    function outLineMerge() {
        if (selected.length < 2) {
            redragonJS.alert("至少需要选中2条数据!");
            return;
        }
        let ids = $("#subId" + selected[selected.length - 1]).text();
        let num = parseInt($("#subNumber" + selected[selected.length - 1]).text());
        for (let i = 0; i < selected.length - 1; i ++) {
            let subModelNumber = $("#subModelNumber" + selected[i]).text();
            for (let j = i + 1; j < selected.length; j ++) {
                if ($("#subModelNumber" + selected[j]).text() != subModelNumber) {
                    return redragonJS.alert("非相同物资不允许合并!");
                }
            }
            ids += "," + $("#subId" + selected[i]).text();
            num +=  parseInt($("#subNumber" + selected[i]).text());
        }
        for (let i = 0; i < selected.length; i ++) {
            parent.materialIds.push($("#subId" + selected[i]).text());
        }
        let j = ++ parent.materialSise;
        let html =
            '<tr id="materialLine' + j + '">' +
                '<td id="materialNo' + j + '">' + j + '</td>' +
                '<td id="materialDetailId' + j + '" style="display: none">' + ids + '</td>' +
                '<td id="materialId' + j + '" style="display: none">' + $("#subModelNumber" + selected[0]).text() + '</td>' +
                '<td id="lineType' + j + '" style="display: none">0</td>' +
                '<td id="lineTypeText' + j + '">线下采购</td>' +
                '<td id="materialCode' + j + '">' + $("#subCode" + selected[0]).text() + '</td>' +
                '<td id="materialBrand' + j + '">' + $("#subBrand" + selected[0]).text() + '</td>' +
                '<td id="materialName' + j + '">' + $("#subName" + selected[0]).text() + '</td>' +
                '<td id="materialType' + j + '">' + $("#subType" + selected[0]).text() + '</td>' +
                '<td id="materialModelNumberText' + j + '">' + $("#subModelNumberText" + selected[0]).text() + '</td>' +
                '<td id="materialNumber' + j + '">' + num + '</td>' +
                '<td id="materialUnit' + j + '">' + $("#subUnit" + selected[0]).text() + '</td>' +
                '<td id="materialOperation' + j + '" class="attachment">' +
                    '<button id="materialdel' + j + '" type="button" onclick="delMaterial(' + j + ')">删除</button>' +
                '</td>' +
            '</tr>';
        parent.appendHtml("materialBody", "materialNothing", html);
        $('#selectPODiv').modal('hide');
    }

    // 线上保存
    function inLineAdd() {
        let html = "";
        for (let i = 0; i < selected.length; i ++) {
            let id = $("#subId" + selected[i]).text();
            parent.materialIds.push(id);
            let j = ++ parent.materialSise;
            html +=
                '<tr id="materialLine' + j + '">' +
                    '<td id="materialNo' + j + '">' + j + '</td>' +
                    '<td id="materialDetailId' + j + '" style="display: none">' + id + '</td>' +
                    '<td id="materialId' + j + '" style="display: none">' + $("#subModelNumber" + selected[i]).text() + '</td>' +
                    '<td id="lineType' + j + '" style="display: none">1</td>' +
                    '<td id="lineTypeText' + j + '">线上采购</td>' +
                    '<td id="materialCode' + j + '">' + $("#subCode" + selected[i]).text() + '</td>' +
                    '<td id="materialBrand' + j + '">' + $("#subBrand" + selected[i]).text() + '</td>' +
                    '<td id="materialName' + j + '">' + $("#subName" + selected[i]).text() + '</td>' +
                    '<td id="materialType' + j + '">' + $("#subType" + selected[i]).text() + '</td>' +
                    '<td id="materialModelNumberText' + j + '">' + $("#subModelNumberText" + selected[i]).text() + '</td>' +
                    '<td id="materialNumber' + j + '">' + $("#subNumber" + selected[i]).text() + '</td>' +
                    '<td id="materialUnit' + j + '">' + $("#subUnit" + selected[i]).text() + '</td>' +
                    '<td id="materialOperation' + j + '" class="attachment">' +
                        '<button id="materialdel' + j + '" type="button" onclick="delMaterial(' + j + ')">删除</button>' +
                    '</td>' +
                '</tr>';
        }
        parent.appendHtml("materialBody", "materialNothing", html);
        $('#selectPODiv').modal('hide');
    }

    // 线下保存
    function outLineAdd() {
        let html = "";
        for (let i = 0; i < selected.length; i ++) {
            let id = $("#subId" + selected[i]).text();
            parent.materialIds.push(id);
            let j = ++ parent.materialSise;
            html +=
                '<tr id="materialLine' + j + '">' +
                    '<td id="materialNo' + j + '">' + j + '</td>' +
                    '<td id="materialDetailId' + j + '" style="display: none">' + id + '</td>' +
                    '<td id="materialId' + j + '" style="display: none">' + $("#subModelNumber" + selected[i]).text() + '</td>' +
                    '<td id="lineType' + j + '" style="display: none">0</td>' +
                    '<td id="lineTypeText' + j + '">线下采购</td>' +
                    '<td id="materialCode' + j + '">' + $("#subCode" + selected[i]).text() + '</td>' +
                    '<td id="materialBrand' + j + '">' + $("#subBrand" + selected[i]).text() + '</td>' +
                    '<td id="materialName' + j + '">' + $("#subName" + selected[i]).text() + '</td>' +
                    '<td id="materialType' + j + '">' + $("#subType" + selected[i]).text() + '</td>' +
                    '<td id="materialModelNumberText' + j + '">' + $("#subModelNumberText" + selected[i]).text() + '</td>' +
                    '<td id="materialNumber' + j + '">' + $("#subNumber" + selected[i]).text() + '</td>' +
                    '<td id="materialUnit' + j + '">' + $("#subUnit" + selected[i]).text() + '</td>' +
                    '<td id="materialOperation' + j + '" class="attachment">' +
                        '<button id="materialdel' + j + '" type="button" onclick="delMaterial(' + j + ')">删除</button>' +
                    '</td>' +
                '</tr>';
        }
        parent.appendHtml("materialBody", "materialNothing", html);
        $('#selectPODiv').modal('hide');
    }

    // 显示收起查询页
    $("#searchButton").click(function(){
        if($("#searchDiv").css("display") == "none"){
            $("#searchDiv").show();
            $("#searchButton").html('关闭查询');
        }else{
            $("#searchDiv").hide();
            $("#searchButton").html('展开查询');
        }
    });

    //跳转页面
    function gotoPage(page){
        let data = {};
        data.page = page;
        data.materialBrand = $("#materialBrand").val();
        data.materialName = $("#materialName").val();
        data.materialModel = $("#materialModel").val();
        data.companyName = $("#companyName").val();
        data.departmentName = $("#departmentName").val();
        data.notIn = parent.materialIds;
        var pageNumber = ${requestScope.pages.pageNumber};
        var currentPage = ${requestScope.pages.page};
        //首页和尾页无需跳转
        if((currentPage==1&&page==1)||(currentPage==pageNumber&&page==pageNumber)){

        } else {
            showMaterial(data);
        }
    }
</script>